<template>
  <div class="box">
    <h1>组件间通信: v-model</h1>
    <div>message: {{ message }}</div>
    <!--
      测试: vue3 是不是 :value 和 @input 实现v-model
      通过这个例子,vue3 是可以通过 :value 和 @input 实现父子组件的数据同步
      数据的流向:
        1. message 传给子组件
        2. 子组件接收数据进行展示,展示到input框当中
        3. 当子组件input修改文本的时候,实时获取文本,把获取文本传给父组件
        4. 父组件在自定义事件中接收到子组件传来的参数,重新给message赋值
        5. message发生改变,重新传递给子组件
      目前实现了 :value 和 @input,看看能不能使用v-model 替换了这两个指令
      测试证明: vue3 的 v-model 不是 :value 和 @input 两个条件实现的
    -->
    <CustomInput :message="message" @input="message = $event"></CustomInput>
    <hr>
    <!-- <CustomInput v-model="message"></CustomInput> -->

    <!--
      vue3 组件的 v-model 实现
      这里: 我告诉你, vue3的v-model 实现条件是 :modelValue 和 @update:modelValue
      如何证明: 先实现了这两个条件,然后替换成 v-model 试一下,如果好使,证明是这两个条件
    -->
    <CustomInput2 :modelValue="message" @update:modelValue="message = $event"></CustomInput2>
    <hr>

    <!-- v-model简写 -->
    <CustomInput2 v-model="message"></CustomInput2>
    <!-- v-model全写 -->
    <CustomInput2 v-model:modelValue="message"></CustomInput2>
    <hr>
    <div>text: {{ text }}</div>
    <!-- 实现多个v-model -->
    <CustomInput3
      :modelValue="message"
      :text="text"
      @update:modelValue="message = $event"
      @update:text="text = $event"
    ></CustomInput3>
    <hr>

    <!-- 全写 -->
    <CustomInput3 v-model:modelValue="message" v-model:text="text"></CustomInput3>
    <!-- 简写 -- 注意: 只有v-model的默认参数modelValue可以被简写,其他的一律不准   -->
    <CustomInput3 v-model="message" v-model:text="text"></CustomInput3>
  </div>
</template>

<script lang="ts" setup>
// v-model 最早用于表单的数据收集的,后来组件也可以使用,父子组件之间的数据同步
// vue2: v-model用于组件必须实现 :value 和 @input 两个条件
// vue3组件实现 v-model 的条件是什么?
//    vue3的v-model 实现条件是 :modelValue 和 @update:modelValue
//    vue3的v-model实现有点像 vue2 的.sync实现???
//    说明: 在vue3中移除了.sync, 把.sync和v-model统一成一个api
// 
//    问: 为什么要统一成一个?统一成一个之后有什么改变吗?
//      答1: 因为两个api记的费劲,所以合成一个api了
//      答2: v-model的实现方式变成了 :modelValue 和 @update:modelValue, 和vue2的.sync实现方式一样
//    【总结】:
//      vue3的v-model实现的条件
//          :xxx  和  @update:xxx   ---> 冒号是v-bind绑定,v-bind绑定的数据必须和 @update: 冒号之后的名字一样
//              这里 xxx 最为常用的就是 modelValue,当 xxx 使用 modelValue 实现的时候,
//              在使用的时候 v-model:modelValue 可以简写成 v-model (注意:只有 modelValue 可以简写,其他的一律不准)


//    问: 为什么要保留vue2的.sync的实现方式用于vue3的v-model,为什么不保留 vue2的v-model实现方式(:value和@input)?
//      答: 因为在一个组件标签上不能绑定多个 :value 和 @input,例如下面错误代码
//          <customeInput :value="message" :value="text" @input="abc" @input="qwer"></customeInput>


//    当有多个数据需要父子组件数据同步呢? 怎么办?
//    CustomInput3  组件实现了多个 v-model
import CustomInput from './CustomInput.vue';
import CustomInput2 from './CustomInput2.vue';
import CustomInput3 from './CustomInput3.vue';
import { ref } from 'vue';

const message = ref("我爱你")

const text = ref('你是个好人')

</script>
